<template>
    <Teleport to="body">
        <div id="small"></div>
    </Teleport>
    <div class="bigBox">
        <Teleport to="#small" :disabled="flag">
            <div id="mse"></div>
        </Teleport>
    </div>
    <div style="height: 20000px;"></div>
</template>
<script lang='ts' setup>
import { onMounted, ref } from 'vue'
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';
const flag = ref<boolean>(true)
onMounted(() => {
    new Player({
        id: 'mse',
        url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
        poster: '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/poster.jpg'
    })
   
    document.addEventListener('scroll', function () {
        if ((document.documentElement.scrollTop || document.body.scrollTop) > 340) {
            flag.value = false
        } else {
            flag.value = true
        }
    })
 
    

})
</script>
<style lang='scss' scoped>
.bigBox {
    width: 600px;
    height: 340px;
    border: 1px solid #000;
}

#small {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 200px;
    height: 140px;
    border: 1px solid #000;
}
</style>